<template>
  <div>
    <!-- 面包屑导航：用于显示当前页面的层级结构 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户关怀关注</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片容器：用于包裹页面的主要内容 -->
    <el-card class="card-container">
      <!-- 页面头部：显示当前页面的标题和返回按钮 -->
      <el-page-header @back="goBack" content="我的关注" class="page-header" />

      <!-- 多条件查询区：用户可以根据多个条件筛选客户数据 -->
      <el-form :inline="true" :model="queryMap" size="small" class="query-form">
        <el-row>
          <h4 class="query-title">多条件查询区</h4>
        </el-row>
        <!-- 客户编号输入框 -->
        <el-form-item>
          <el-input v-model="queryMap.clientNo" clearable placeholder="请输入客户编号" />
        </el-form-item>
        <!-- 账户名称输入框 -->
        <el-form-item>
          <el-input v-model="queryMap.accountName" clearable placeholder="请输入账户名称" />
        </el-form-item>
        <!-- 所属公司输入框 -->
        <el-form-item>
          <el-input v-model="queryMap.company" clearable placeholder="请输入所属公司" />
        </el-form-item>
        <!-- 平台类型输入框 -->
        <el-form-item>
          <el-input v-model="queryMap.platformType" clearable placeholder="请输入平台类型"></el-input>
        </el-form-item>
        <!-- 账户类型选择器 -->
        <el-form-item :rules="[{message: '请选择账户类型', trigger: 'change' }]">
          <el-select v-model="queryMap.accountType" clearable placeholder="请选择账户类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="正常"></el-option>
            <el-option label="异常" value="异常"></el-option>
            <el-option label="关停" value="关停"></el-option>
          </el-select>
        </el-form-item>
        <!-- 客户类型选择器 -->
        <el-form-item>
          <el-select v-model="queryMap.clientTypeId" clearable placeholder="请选择客户类型">
            <el-option
                v-for="type in clientTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 状态选择器 -->
        <el-form-item>
          <el-select v-model="queryMap.status" clearable placeholder="请选择状态">
            <el-option
                v-for="state in status"
                :key="state.value"
                :label="state.label"
                :value="state.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 操作按钮：重置和查询 -->
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset" plain>重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="searchBgClients">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作按钮区，包含添加、关注、删除等操作 -->
      <div style="margin-bottom: 10px; display: flex">
        <span class="hint" style="flex: 1;"></span>
        <!-- 关注选中客户按钮 -->
        <el-button icon="el-icon-star-on" :disabled="multipleSelection.length === 0" @click="unFollowClients" v-hasPermission="'bg_client:attention'">取消关注选中</el-button>
        <!-- 删除选中客户按钮 -->
        <el-button icon="el-icon-delete" :disabled="multipleSelection.length === 0" @click="deleteBgClient" v-hasPermission="'ClientManage:delete'">删除选中</el-button>
      </div>

      <!-- 客户数据表格区域 -->
      <el-table ref="multipleTable" :data="clientConcerns" size="small" @selection-change="handleSelectionChange"
                border style="width: 100%;" height="420">
        <!-- 选择框列 -->
        <el-table-column type="selection" width="40"></el-table-column>
        <!-- 客户编号列 -->
        <el-table-column prop="clientNo" label="客户编号" width="100" fixed="left"></el-table-column>
        <!-- 账户名称列 -->
        <el-table-column prop="accountName" label="账户名称" width="150"></el-table-column>
        <!-- 所属公司列 -->
        <el-table-column prop="company" label="所属公司" width="150"></el-table-column>
        <!-- 平台类型列 -->
        <el-table-column prop="platformType" label="平台类型" width="100"></el-table-column>
        <!-- 账户类型列 -->
        <el-table-column prop="accountType" label="账户类型" width="100"></el-table-column>
        <!-- 客户类型列 -->
        <el-table-column label="客户类型" width="100">
          <template v-slot="scope">
            {{getClientType(scope.row.clientTypeId)}}
          </template>
        </el-table-column>
        <!-- 坐席数列 -->
        <el-table-column prop="seatsNumber" label="坐席数" width="80"></el-table-column>
        <!-- 联系人列 -->
        <el-table-column prop="linkman" label="联系人" width="100"></el-table-column>
        <!-- 联系电话列 -->
        <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
        <!-- 所属售后列 -->
        <el-table-column label="所属售后" width="100">
          <template v-slot="scope">
            {{getEmpNickName(scope.row.employeeIdAftermarket)}}
          </template>
        </el-table-column>
        <!-- 所属销售列 -->
        <el-table-column label="所属销售" width="100">
          <template v-slot="scope">
            {{getEmpNickName(scope.row.employeeIdMarket)}}
          </template>
        </el-table-column>
        <!-- 状态列 -->
        <el-table-column label="状态" width="80">
          <template v-slot="scope">
            {{getStatusInfo(scope.row.status)}}
          </template>
        </el-table-column>
        <!-- 呼叫次数列 -->
        <el-table-column prop="callNumber" label="呼叫次数" width="100"></el-table-column>
        <!-- 账户有效期列 -->
        <el-table-column prop="inDate" label="账户有效期" width="150"></el-table-column>
        <!-- 关停时间列 -->
        <el-table-column prop="shutdownTime" label="关停时间" width="150"></el-table-column>
        <!-- 最后呼叫时间列 -->
        <el-table-column prop="lastCallTime" label="最后呼叫时间" width="150"></el-table-column>
        <!-- 最后更新日期列 -->
        <el-table-column prop="lastUpdatedDate" label="最后更新日期" width="150"></el-table-column>
        <!-- 操作列，包含查看、跟进、续签、关注等操作按钮 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template v-slot="scope">
            <div style="display: flex; justify-content: space-around;">
              <!-- 查看详情按钮 -->
              <el-tooltip content="查看详情" placement="top" effect="light">
                <el-button circle round plain size="small" type="primary" icon="el-icon-view" @click="drawer = true;renderClientInfo(scope.row)"></el-button>
              </el-tooltip>
              <!-- 跟进按钮 -->
              <el-tooltip content="跟进" placement="top" effect="light">
                <el-button circle round plain icon="el-icon-edit" type="success" size="small" @click="openFollowDialog(scope.row)"></el-button>
              </el-tooltip>
              <!-- 续签按钮 -->
              <el-tooltip content="续签" placement="top" effect="light">
                <el-button circle round plain icon="el-icon-refresh" type="warning" size="small" @click="openRenewDialog(scope.row)"></el-button>
              </el-tooltip>
              <!-- 关注按钮 -->
              <el-tooltip content="取消关注" placement="top" effect="light" v-hasPermission="'bg_client:attention'">
                <el-button circle round icon="el-icon-star-off" type="warning" size="small" @click="unFollowClient(scope.row)"></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMap.pageNum"
          :page-sizes="[6, 10, 20, 30]"
          :page-size="queryMap.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!-- 查看详情抽屉 -->
      <el-drawer title="用户详情" :visible.sync="drawer" :with-header="false" size="40%">
        <div style="padding: 20px;height:100vh;overflow: auto">
          <el-card shadow="hover">
            <div style="display: flex; align-items: center; margin-bottom: 15px;">
              <i class="el-icon-user" style="font-size: 20px; color: #409EFF; margin-right: 10px;"></i>
              <h3 style="margin: 0; font-size: 16px;">用户基本信息</h3>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">客户编号:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.clientNo}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">所属公司:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.company}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">联系人:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.linkman}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">联系电话:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.phone}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">账户名称:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.accountName}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">平台类型:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.platformType}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">账户余额:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.balance}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">状态:</span>
                  <span class="value" style="font-size: 12px;">{{getStatusInfo(clientConcernData.status)}}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card shadow="hover" style="margin-top: 15px;">
            <div style="display: flex; align-items: center; margin-bottom: 15px;">
              <i class="el-icon-suitcase" style="font-size: 20px; color: #67C23A; margin-right: 10px;"></i>
              <h3 style="margin: 0; font-size: 16px;">客户类型信息</h3>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">客户类型:</span>
                  <span class="value" style="font-size: 12px;">
                    {{getClientType(clientConcernData.clientTypeId)}}
                  </span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">账户类型:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.accountType}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">所属售后:</span>
                  <span class="value" style="font-size: 12px;">{{getEmpNickName(clientConcernData.employeeIdAftermarket)}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">所属销售:</span>
                  <span class="value" style="font-size: 12px;">{{getEmpNickName(clientConcernData.employeeIdMarket)}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">呼叫次数:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.callNumber}}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>

          <el-card shadow="hover" style="margin-top: 15px;">
            <div style="display: flex; align-items: center; margin-bottom: 15px;">
              <i class="el-icon-time" style="font-size: 20px; color: #E6A23C; margin-right: 10px;"></i>
              <h3 style="margin: 0; font-size: 16px;">时间信息</h3>
            </div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">账户有效期:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.inDate}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">关停时间:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.shutdownTime}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">最后更新日期:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.lastUpdatedDate}}</span>
                </div>
                <div class="detail-item">
                  <span class="label" style="font-size: 12px;">最后呼叫时间:</span>
                  <span class="value" style="font-size: 12px;">{{ clientConcernData.lastCallTime}}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="margin: 3vh">
            <el-row>
              <el-col :span="24" style="color: #1a73e8">跟进时间线</el-col>
            </el-row>
            <div class="block">
              <el-timeline>
                <el-timeline-item
                    v-for="(item, index) in clientFollowList"
                    :key="index"
                    :timestamp="item.followTime.slice(0, 10)"
                    placement="top">
                  <el-card>
                    <h4>{{ item.followContent }}</h4>
                    <p>{{ item.nick_name }} 提交于 {{ item.followTime.slice(0, 10) }}
                      {{ item.followTime.slice(11, 16) }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </div>
      </el-drawer>

      <!-- 跟进对话框 -->
      <el-dialog title="跟进" :visible.sync="followDialogVisible" width="400px" :before-close="handleCloseFollow">
        <el-form :model="followForm" ref="followForm" label-width="100px">
          <!-- 跟进内容输入框 -->
          <el-form-item label="跟进内容" prop="followContent" :rules="[{ required: true, message: '请输入跟进内容', trigger: 'blur' }]">
            <el-input v-model="followForm.followContent" type="textarea"></el-input>
          </el-form-item>
          <!-- 提醒时间日期时间选择器 -->
          <el-form-item label="提醒时间" prop="remindTime" :rules="[{ required: true, message: '请选择提醒时间', trigger: 'change' }]">
            <el-date-picker v-model="followForm.remindTime" type="datetime" placeholder="选择提醒时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 按钮组 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="followDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveFollow" v-hasPermission="'bg_client_follow:edit'">保存</el-button>
        </span>
      </el-dialog>

      <!-- 续签对话框 -->
      <el-dialog title="续签" :visible.sync="renewDialogVisible" width="400px" :before-close="handleCloseRenew">
        <el-form :model="renewForm" ref="renewForm" label-width="100px">
          <!-- 缴纳费用输入框 -->
          <el-form-item label="缴纳费用" prop="fee">
            <el-input type="number" v-model="renewForm.balance"></el-input>
          </el-form-item>
          <!-- 续费时间日期选择器 -->
          <el-form-item label="续费时间" prop="renewTime">
            <el-date-picker v-model="renewForm.lastUpdatedDate" type="datetime" placeholder="选择续费时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
        </el-form>
        <!-- 按钮组 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="renewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRenew" v-hasPermission="'bg_client:renew'">保存</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 控制查看详情对话框的显示与隐藏
      detailDialogVisible: false,
      // 控制跟进对话框的显示与隐藏
      followDialogVisible: false,
      // 控制续签对话框的显示与隐藏
      renewDialogVisible: false,
      // 控制详情的显示与隐藏
      drawer: false,
      // 存储客户详情数据
      clientConcernData: {},
      // 跟进表单数据
      followForm: {},
      clientFollowList: [],   //客户跟进数据
      // 续签表单数据
      renewForm: {},
      // 跟进类型列表
      followTypes: [
        { label: '电话', value: '电话' },
        { label: '邮件', value: '邮件' },
        { label: '面谈', value: '面谈' },
        // 其他跟进类型
      ],
      // 客户数据列表
      clientConcerns: [],
      // 账户类型列表
      accountTypes: [],
      // 客户类型列表
      clientTypes: [],
      //可选员工
      employees:[],
      // 多选选中项
      multipleSelection: [],
      status:[
        {label: '冻结', value: -1 },
        {label: '正常', value: 0 },
      ],
      // 总记录数
      total: 0,
      // 查询条件映射对象
      queryMap: {
        pageNum: 1,
        pageSize: 10,
        isAttention:1,
      },
    };
  },
  methods: {
    //批量删除客户
    async deleteBgClient() {
      // 将选中的客户 ID 包装成数组
      const payload = this.multipleSelection.map(item => item.clientId); // 获取选中的客户 ID 数组
      console.log(payload)
      if (payload.length > 0) {
        // 弹出确认框，询问用户是否确认删除
        const confirmResult = await this.$confirm('确认要批量删除该客户吗？此操作不可恢复，请谨慎操作', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        if (confirmResult === 'confirm') {
          // 发送批量删除请求
          const {data: res} = await this.$http.post("bgClient/deleteBgClients", payload);

          if (res > 0) {
            this.$message.success(`删除成功，共成功删除 ${res} 个客户`);
            // 更新列表或执行其他操作
            this.getClientList();
          } else {
            this.$message.error('删除失败，没有客户被成功删除');
          }
        } else {
          this.$message.info('已取消删除操作');
        }
      } else {
        this.$message.error("您没有选择客户");
      }
    },
    // 返回按钮的回调方法
    goBack() {
      console.log('go back');
    },
    // 处理选择变化的方法
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 重置查询条件的方法
    reset() {
      this.queryMap = {
        pageNum: 1,
        pageSize: 10,
        isAttention:1,
      };
      this.getBgClients();
    },
    // 查询客户关怀列表的方法
    searchBgClients() {
      this.queryMap.pageNum = 1;
      this.getBgClients();
    },
    // 打开跟进对话框的方法
    openFollowDialog(client) {
      this.followForm = {
        clientId:client.clientId,
      };
      this.followDialogVisible = true;
    },
    // 打开续签对话框的方法
    openRenewDialog(client) {
      this.renewForm = {
        balance: null,
        lastUpdatedDate: null,
        clientId:client.clientId,
        accountName:client.accountName,
      };
      this.renewDialogVisible = true;
    },
    // 处理表格尺寸变化的方法
    handleSizeChange(newSize) {
      this.queryMap.pageSize = newSize;
      this.getBgClients();
    },
    // 处理当前页变化的方法
    handleCurrentChange(current) {
      this.queryMap.pageNum = current;
      this.getBgClients();
    },
    // 处理关闭跟进对话框的方法
    handleCloseFollow(done) {
      this.followDialogVisible = false;
      done();
    },
    // 处理关闭续签对话框的方法
    handleCloseRenew(done) {
      this.renewDialogVisible = false;
      done();
    },
    // 获取客户关怀列表的方法
    async getBgClients() {
      const {data:res}=await this.$http.get("/clientConcern/getClientConcerns",{
        params:this.queryMap
      });
      if (!res.success) {
        this.$message.error("服务器内部错误:");
      }else {
        this.clientConcerns = res.data.rows;
        this.total=res.data.total;
      }
    },
    async getEmployees() {
      this.employees=[]
      const {data:res}=await this.$http.get("/clientConcern/getEmployees");
      if (!res.success) {
        return this.$message.error("服务器内部错误:");
      }else{
        for (let emp of res.data){
          let type={
            label:emp.nickName,
            value:emp.empId
          }
          this.employees.push(type);
        }
      }
    },
    async getAllClientTypes(){
      this.clientTypes =[];
      const {data:res}=await this.$http.get("/clientConcern/getAllClientTypes");
      if (!res.success) {
        return this.$message.error("服务器内部错误");
      }else {
        for (let item of res.data){
          let type={
            label:item.options,
            value:item.clientTypeId
          }
          this.clientTypes.push(type);
        }
      }
    },
    //根据id得到昵称并渲染
    getEmpNickName(value){
      for (let item of this.employees) {
        if (item.value==value){
          return item.label;
        }
      }
      return "未知员工";
    },
    //根据id得到昵称并渲染
    getStatusInfo(value){
      for (let item of this.status) {
        if (item.value==value){
          return item.label;
        }
      }
      return "未知状态";
    },
    getClientType(value){
      for (let item of this.clientTypes) {
        if (item.value==value){
          return item.label;
        }
      }
      return "未知客户类型";
    },
    async renderClientInfo(client) {
      this.clientConcernData = client;
      let appId = null;
      let sign = null;
      const {data: res1} = await this.$http.post("/clientConcern/getAppId",
          {accountName: client.accountName}
      );
      if (!res1.success) {
        return this.$message.error("错误信息：" + res1.data.errorData)
      }
      appId = res1.data;
      if (appId == null) {
        return this.$message.error("该账户应用key不存在,无法查询余额");
      }
      const {data: res2} = await this.$http.post("/clientConcern/getSign", {
        appId: appId,
        accountName: client.accountName
      })
      if (!res2.success) {
        return this.$message.error("错误信息：" + res2.data)
      }
      sign = res2.data
      if (sign == null) {
        return this.$message.error("错误信息：签名错误")
      }
      await axios.post("https://yx.jsyouxiao.com/apis/public/system/dept/balance", {
        appId: appId,
        sign: sign
      }).then(res => {
        console.log(res)
        this.clientConcernData.balance = res.data.data.money
      }).catch(error => {
        console.log(error)
      })
      this.getClientFollow(client.clientId);
    },
    async updateAttention(client){
      let data={};
      data.clientId=client.clientId;
      data.isAttention=0;
      const {data:res}=await this.$http.put("/clientConcern/updateAttention",data);
      if (!res.success){
        console.log(res);
        return this.$message.error("关注失败");
      }
      this.$message.success(res.data);
      this.getBgClients();
    }
    ,
    // 关注单个客户的方法
    unFollowClient(client) {
      this.$confirm('确定要取消关注该客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 关注单个
        this.updateAttention(client);
        this.getBgClients();
      }).catch(() => {
        // 取消操作
      });
    },
    // 取消关注多个客户的方法
    unFollowClients() {
      const clients = this.multipleSelection;
      console.log(clients);
      this.$confirm('确定要取消关注选中的客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 关注多个客户
        for (let client of clients) {
          this.updateAttention(client);
        }
      }).catch(() => {
        // 取消操作
      });
    },
    // 保存续签内容的方法
    async saveRenew(){
      const {data:res}=await this.$http.put("/clientConcern/renew",this.renewForm);
      if (!res.success) {
        return this.$message.error("服务器内部错误:"+res.data);
      }
      this.$message.success(res.data);
      this.renewDialogVisible = false;
      this.renewForm={};
      this.getBgClients();
    },
    // 保存跟进内容的方法
    async saveFollow() {
      const {data:res}=await this.$http.post("clientConcern/addBgClientFollow",this.followForm);
      if (!res.success){
        return this.$message.error(res.data);
      }
      this.followDialogVisible = false
      this.$message.success(res.data);
    },
    //获取客户跟进详情
    async getClientFollow(clientId) {
      const {data: res} = await this.$http.get(
          "clientConcern/getBgClientFollowListByClientId", {
            params: {clientId: clientId}
          }
      );
      if (!res.success) {
        return this.$message.error("获取客户跟进详情失败:" + res.data.errorMsg);
      } else {
        this.clientFollowList = res.data
      }
    },
  },
  created() {
    this.getAllClientTypes();
    this.getEmployees();
    this.getBgClients();
  },
};
</script>

<style scoped>
.breadcrumb {
  padding-left: 10px;
  padding-bottom: 10px;
  font-size: 12px;
}

.card-container {
  margin-top: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.query-form {
  margin-top: 10px;
}

.query-title {
  margin: 1vh 0 2vh;
  color: #1f2d3d;
}

.customer-table {
  margin-top: 20px;
}

.pagination {
  margin-top: 10px;
}
</style>